@import "../base"
.discovery_content
  width: 100%
  min-height: 400px
  height: 100%
  display: flex
  flex-direction: column
  background: rgba(21, 20, 20, 1)
  align-items: center
  color: $font_color_title
  text-align: center
  font-size: $font_size

  .clickToCreateQuery
    width: 250px
    height: 40px
    position: relative
    line-height: 40px
    background: linear-gradient(90deg, #88a4c7, #7093ea)
    color: #316585
    margin-bottom: 20px

    &:after
      content: ""
      position: absolute
      left: 0
      bottom: 0
      border-left: 20px solid rgba(21, 20, 20, 1)
      border-top: 20px solid transparent
      border-bottom: 20px solid transparent

    &:before
      content: ""
      position: absolute
      right: -20px
      bottom: 0
      border-left: 20px solid #7093ea
      border-top: 20px solid transparent
      border-bottom: 20px solid transparent

    &:hover
      background: #5b86f6
      background: linear-gradient(90deg, #657a91, #5b86f6)
      color: #ffffff

      &:before
        border-left: 20px solid #5b86f6


  .showGame

    display: flex
    flex-direction: column
    align-items: center

  .discovery_cart
    float: right
    display: flex
    flex-direction: row
    justify-content: center
    align-items: center
    padding: 10px 0 0 0

    .cartItem
      background: #61a1c2

    &:hover

      .delGame
        display: inline-block
        line-height: 80px
        text-align: center
        vertical-align: middle
        background: #669193
        &:hover
          background: #03e9f4

    .delGame
      display: none
